<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue学习页面</title>

    <script type="application/javascript" src="../js/vue.js"></script>

</head>
<body>
<div id="app">
    <h1>{{title}}</h1>
    <h1 v-text="text"></h1>

    <button @click="fun01">按钮01</button>
    <br/>
    <ul>
        <li v-for="(item,index) in items">{{item.name}}</li>
    </ul>
    //判断v-if
    <h1 v-if="flag">死</h1>
    <h1 v-show="!flag">？</h1>
    <button @click="flag = !flag">按钮03</button>

    <input v-model="inputText"></input>

</div>

<script>
    let app = new Vue({
        el:"#app",
        data() {
            return {
                title:"vue学习",
                text:"?",
                items:[
                    {
                        id:1,
                        name:"张三"
                    }
                ],
                flag:false,
                inputText:"",
            }
        },
        methods: {
            fun01() {
                //向控制台打印输出log
                console.log("方法01调用")
                //弹窗
                alert("打死他")

            }
        },
    })

</script>

</body>
</html>